<template>
    <div class="newsInfoContainer">
        <h1>{{newsInfoList.title}}</h1>
        <p>
            <span>发表时间：{{newsInfoList.add_time | fordate}}</span>
            <span>点击次数：{{newsInfoList.click}}次</span>
        </p>
        <hr>
        <div class="content" v-html="newsInfoList.content"></div>
        <!-- 子评论组件 -->
        <momentbox :id="this.id"></momentbox>
    </div>
</template>

<script>
import moment from '../subComponent/comment'
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            id:this.$route.params.id,
            newsInfoList:{}
        }
    },
    created(){
        this.getNewsInfo()
    },
    methods:{
        getNewsInfo(){
            this.$http.get('api/getnew/'+this.id).then(result=>{
                // console.log(result)
                if(result.status === 200 && result.data.status === 0){
                    this.newsInfoList = result.data.message[0]
                }else{
                    Toast('请求失败')
                }
            })
        }
    },
    components:{
        'momentbox':moment
    }
};
</script>

<style lang = 'less' scoped>
    .newsInfoContainer{
        padding: 0 5px;
        h1{
            font-size: 16px;
            text-align: center;
            color: red;
            padding: 10px 0;
        }
        p{
            display: flex;
            justify-content: space-between;
            span{
                font-size: 14px;
                color:#0069ff;
            }
        }
        .content /deep/ img{
            width: 100%;
        }
    }
    
</style>